<html>
<head>
  <title>Network | Selected/Unselected Image</title>

  <script type="text/javascript" src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>
</head>

<body>
<div id="mynetwork"></div>
<script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([{
    id: 1,
    shape: 'image',
    size: 20,
    label: 'No select image',
    image: './unselected.svg',
  }, {
    id: 2,
    shape: 'image',
    size: 20,
    label: 'Select image broken',
    image: {
      unselected: './unselected.svg',
      selected: './BROKEN_LINK/selected.svg',
    },
  }, {
    id: 3,
    shape: 'image',
    size: 20,
    label: 'Select works!',
    image: {
      unselected: './unselected.svg',
      selected: './selected.svg',
    },
    shapeProperties: {
      borderDashes: [15, 5],
      interpolation: false,
    }
  }]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 2},
    {from: 2, to: 3},
  ]);

  // create a network
  var container = document.getElementById('mynetwork');

  // provide the data in the vis format
  var data = {
    nodes: nodes,
    edges: edges
  };

  var options = {
    layout:{
      randomSeed: 5
    },
    nodes: {
      brokenImage: './broken-image.png',
    }
  };
  // initialize!
  var network = new vis.Network(container, data, options);
</script>

</body>
</html>
